<!--超级分类  -->
<template>
 <view class="content">
  <!--左分类导航 start-->
  <view class="nav_left">
    <block v-for="leftitem in classify" :key="leftitem">
      <view v-bind:class="{ active: index==curindex ,nav_left_items:true}  " @tap="switchRightTab" :data-index="index">{{leftitem.main_name}}</view>
    </block>
  </view>
  <!--左分类导航 end-->
  <!--右边分类 start-->
  <view class="nav_right">
    <view v-if="classify[curindex]">
      <block v-for="(item,i) in classify[curindex].data"  :key="item" :index="i">
        <!--右边分类块 start-->
        <view class="nav_right_block">
          <p>{{item.next_name}}</p>
          <!--右分类点击元素 start-->
          <view class="nav_right_items">
            <!-- <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}"> -->
            <block  v-for="(ele,j) in item.info"  :key="ele" :index="j" >
              <view class="navitem" @tap="purl(ele.son_name)">
                <view>
                  <block v-if="ele.imgurl">
                    <image :src="ele.imgurl"/>
                  </block>
                  <block v-else>
                    <image src='http://temp.im/50x30' />
                  </block>
                </view>
                <view v-if="ele.son_name">
                  <text>{{ele.son_name}}</text>
                </view>
                <view v-else>
                  <text>吴改</text>
                </view>
              </view>
            </block>
          </view>
           <!--右分类点击元素 end-->
        </view>
         <!--right block end-->
      </block>
    </view>
    <!-- <view v-else>暂无数据</view> -->
  </view>
   <!--right end-->
</view>
</template>

<script>
import network from '@/utils/network.js'

export default {
  data () {
    return {
      classify: Object,
      curindex: 0
    }
  },

  methods: {
    switchRightTab (e) {
      let index = parseInt(e.currentTarget.dataset.index)
      this.curindex = index
    },
    purl (e) {
      let param = {
        url: '/api/superkeyword',
        q: {
          keyword: e,
          back: '20'
        }
      }
      wx.navigateTo({
        url: '../market/market?param=' + JSON.stringify(param)
      })
    }
  },
  onLoad () {
    this.options = {
      url: '/api/supercats/list'
    }
    network
      .GET(this.options)
      .then(d => {
        if (d.data.msg === 'SUCCESS') {
          this.classify = d.data.general_classify
        }
      })
  }
}

</script>
<style lang='less'>
page{
  background: #f5f5f5;
}
.content {

  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #939393;
}
.nav_left{
 position: fixed;
 left:0;
 overflow-y: auto;
  width: 20%;
  height: 100%;
  background: #f5f5f5;
  text-align: center;
  padding-right:20rpx;
}
.nav_left .nav_left_items {
  height: 30px;
  line-height: 30px;
  padding: 6px 0;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}
.nav_left .nav_left_items.active{
  background: #fff;
  border-left: 8rpx solid rgb(247, 73, 73);
  color:rgb(247, 73, 73);
}
.nav_right{
  overflow-y: auto;
  position: fixed;
  right:0;
  width: 75%;
  height: 100%;
  padding: 10px;
  background: #fff;
  .nav_right_block{
    p{
      font-size:30rpx;
      text-align: center;
    }
    .nav_right_items{
      display:flex;
      flex-wrap: wrap;
      margin-top:20rpx;
      .navitem{
        width: 33.33%;
        height: 80px;
        text-align: center;
        image{
          width: 100rpx;
          height: 80rpx;
        }
        text{
          display: block;
          margin-top: 5px;
          font-size: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}


</style>